<template>
    <div>
        <div class="searchPage-good" v-for="(type,index) in types" :key="index">
            <GoodsList class="searchPage-good-img" :style="`background-image:url(${type.img})`"
                    :detail="type"
            ></GoodsList>
            <!-- <div class="searchPage-good-img">
                <img src="../../public/images/btn.png" >
            </div> -->
            <div class="searchPage-good-label">
                <p v-for="(v,i) in type.props" :key="i">{{v}}</p>
            </div>
            <div class="searchPage-good-price">
                <span>￥{{type.price}}</span>
                <span>{{type.cfav}}<i class="iconfont icon-like"></i></span>
            </div>
        </div>
    </div>
</template>
<script>
import GoodsList from "./goodsList";
export default {
    components:{
        GoodsList
    },
    props:{
        types:{
            type:Array,
            default(){
                return [];
            }
        }
    }

}
</script>
<style lang="less" scoped>
.searchPage-good{
    width:50%;
    box-sizing:border-box;
    >.searchPage-good-img{
        // background-image:url("../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg");
        background-size:100% 100%;
        width:95%;
        height:5rem;
        padding:0.1rem;
        box-sizing:border-box;
        position:relative;
        >img{
            width:0.8rem;
            height:0.8rem;
            position:absolute;
            top:4.2rem;
            left:2.6rem;
        }
    }
    >.searchPage-good-label{
        display:flex;
        flex-flow:row wrap;
        padding:0.1rem;
        >p{
            background-color:@teal;
            font-size:0.2rem;
            padding:0rem 0.1rem;
            border-radius:10%;
            margin:0.1rem 0.1rem 0rem 0.1rem;
            color:@white;
            text-align:center;
        }
    }
    .searchPage-good-price{
        padding:0.1rem;
        display:flex;
        justify-content:space-between;
        align-items:center;
        >span:first-child{
            font-size:0.4rem;
            font-weight:bold;
        }
        >span:last-child{
            color:@gray;
            font-size:0.28rem;
            >i{
                padding-left:0.1rem;
                font-size:0.28rem;
            }
        }
    }
}
</style>